/* eslint-disable jsx-a11y/alt-text */
import React from 'react'
import { withRouter } from "react-router-dom"
import "../assets/css/relist/MusicList.css"


class List extends React.Component {
    constructor(props) {
        super(props)
        props.getReList(this.props.location.search.replace("?id=", ""))
    }
    componentWillMount() {
        this.props.getReList(this.props.location.search.replace("?id=", ""))
    }

    //播放音乐（传id值）
    start(id, index) {
        // console.log("老蒋", id, index)
        // console.log(this.props.location.search.replace("?id=",""))
        //清除以播放的时长
        this.props.clearTimenow()
        let num = Number(this.props.location.search.replace("?id=", ""))
        this.props.getMusicURLApi(id)
        setTimeout(() => {
            this.props.getmusic(num)
            this.props.getNowMusicindex(index);
            this.props.playOrPause(true)
        }, 50)

    }

    render() {

        const { tracks } = this.props.reList || { tracks: [] }
        let ele = null;
        try {
            ele = <div>
                {tracks.map((item, index) => {
                    return (
                        <div key={item.id} className="list" style={{ display: "flex" }} >
                            <div className="listIndex">{index + 1}</div>
                            <div className="line" onClick={this.start.bind(this, item.id, index)}>
                                <div>
                                    <div className="name"> {item.name} </div>
                                    <div className="singer">{item.ar[0].name}&nbsp;-&nbsp;{item.name}</div>
                                </div>
                                <div><img src={[require("../assets/image/start.png")]} className="button"></img></div>
                            </div>
                        </div>
                    )
                })}
            </div>
        } catch (e) { }
        return (
            ele
        )
    }
}

export default withRouter(List);